<template>
    <div class="manager-archive-audio__wrapper">
        <div class="top-control__wrapper">
            <el-button type="primary" size="small" @click="onClickPostBtn">发布新稿件</el-button>
        </div>
        <el-pagination
            background
            layout="total, ->, sizes, prev, pager, next"
            :total="count"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :current-page="currentPage"
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
            :style="{
                paddingBottom: '15px'
            }"
        ></el-pagination>
        <template v-for="archive in archives">
            <archiveAudioCard :key="archive.aid" :archive="archive" @delete="onArchiveDelete"></archiveAudioCard>
        </template>
        <el-pagination
            background
            layout="sizes, prev, pager, next, ->, total"
            :total="count"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :current-page="currentPage"
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
        ></el-pagination>
    </div>
</template>

<script>
import { archiveAudioListFinderAPI } from "@/api/km_archive_audio";
import archiveAudioCard from "./components/archiveAudioCard.vue";

export default {
    components: {
        archiveAudioCard,
    },
    data() {
        return {
            count: 0,
            pageSize: 10,
            pageSizes: [5, 10, 15, 20],
            currentPage: 1,
            archives: [],
        };
    },
    created() {
        this.getArchiveAudioList();
    },
    methods: {
        getArchiveAudioList() {
            archiveAudioListFinderAPI({
                page: this.currentPage,
                size: this.pageSize,
            })
                .then(({ data }) => {
                    this.archives = data.rows;
                    this.count = data.count;
                })
                .catch((err) => {
                    console.log(err);
                    this.$message.error("网络错误");
                });
        },
        onCurrentChange(currentPage) {
            this.currentPage = currentPage;
            this.getArchiveAudioList();
        },
        onSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.getArchiveAudioList();
        },
        onArchiveDelete() {
            if (this.archives.length === 1 && this.currentPage > 1) {
                this.currentPage = this.currentPage - 1;
            }
            this.getArchiveAudioList();
        },
        onClickPostBtn() {
            this.$router.push({
                name: "audioArchiveUploader",
            });
        },
    },
};
</script>

<style lang="scss">
.manager-archive-audio__wrapper {
    padding: 20px;

    .top-control__wrapper {
        padding: 20px 10px;
        margin-bottom: 20px;
        background-color: #fff;
    }

    .el-pagination .btn-next,
    .el-pagination .btn-prev,
    li {
        background-color: transparent;
    }

    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .el-pager li {
        background-color: #fff;
    }
}
</style>